<template>
  <view class="recordBox">
    <view class="orderItem" v-for="item in orderList" :key="item.id">
      <view class="good">
        <view class="pic">
          <image :src="item.goods_info.cover_pic"></image>
        </view>
        <view class="info">
          <text class="name">{{ item.goods_info.name }}</text>
          <view class="count">
            <text>{{ item.goods_info.attr | attr }}</text>
            <text>×1</text>
          </view>
          <text class="price">
            {{
              item.integral_price && item.integral_price > 0
                ? `${item.integral_price}积分`
                : ""
            }}{{ item.integral_price > 0 && item.total_price > 0 ? "+" : ""
            }}{{
              item.total_price && item.total_price > 0
                ? `${item.total_price}元`
                : ""
            }}
          </text>
        </view>
      </view>
      <view class="btns">
        <text>{{ item.trade_status == 1 ? "已取消" : "兑换成功" }}</text>
        <view class="btn">
          <text @click="deleteOrder(item.id)">删除订单</text>
          <text @click="toOrder(item.id)">查看订单</text>
        </view>
      </view>
    </view>
    <view class="noMore" v-if="noMore">没有更多了~</view>

    <view class="empty" style="padding-top: 50rpx" v-if="!orderList.length">
      <u-empty mode="data"></u-empty>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      orderList: [],
      page: 1,
      noMore: false
    };
  },
  onLoad() {
    this.getList();
  },
  methods: {
    // 获取订单列表
    async getList() {
      const res = await this.$allrequest.integral.getOrderList({
        page: this.page
      });
      if (res.code == 0 && res.data) {
        this.orderList = [...this.orderList, ...res.data.data];
        if (this.orderList.length >= res.data.totalCount) {
          this.noMore = true;
        } else {
          this.noMore = false;
        }
      }
    },
    // 删除订单
    deleteOrder(order_id) {
      let that = this;
      uni.showModal({
        title: this.$t("order.prompt"),
        content: this.$t("mdAdmin.confirmCancle"),
        success: function (res) {
          if (res.confirm) {
            that.$allrequest.order
              .delete({
                order_id: order_id
              })
              .then((res) => {
                if (res.code == 0) {
                  that.page = 1;
                  that.orderList = [];
                  that.noMore = false;
                  that.getList();
                }
              });
          } else if (res.cancel) {
          }
        }
      });
    },
    // 跳转订单详情
    toOrder(id) {
      uni.navigateTo({
        url: "/order/order-detail/order-detail?id=" + id
      });
    }
  },
  onReachBottom() {
    if (!this.noMore) {
      this.page++;
      this.getList();
    }
  },
  filters: {
    attr(val) {
      let attr = JSON.parse(val);
      return attr
        .map((item) => {
          return item.attr_list.map((att) => {
            return att.attr_name;
          });
        })
        .join(",");
    }
  }
};
</script>

<style lang="scss" scoped>
.recordBox {
  min-height: 100vh;
  padding: 24rpx;
  background-color: #f2f2f2;
  color: #262626;
  font-family: PingFang SC;
  .orderItem {
    width: 100%;
    margin-bottom: 24rpx;
    padding: 30rpx 24rpx;
    border-radius: 20rpx;
    background-color: #fff;
    .good {
      display: flex;
      .pic {
        width: 160rpx;
        height: 160rpx;
        min-width: 160rpx;
        border-radius: 10rpx;
        overflow: hidden;
        image {
          width: 100%;
          height: 100%;
        }
      }
      .info {
        flex: auto;
        margin-left: 20rpx;
        width: 0;
        display: flex;
        flex-direction: column;
        .name {
          font-size: 28rpx;
        }
        .count {
          display: flex;
          align-items: center;
          justify-content: space-between;
          font-size: 24rpx;
          color: #8c8c8c;
          margin: 14rpx 0;
        }
        .price {
          font-size: 32rpx;
          font-weight: 600;
        }
      }
    }
    .btns {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 24rpx;
      color: #f0250e;
      font-size: 26rpx;
      .btn {
        display: flex;
        align-items: center;
        text {
          width: 152rpx;
          height: 60rpx;
          border-radius: 99px;
          font-size: 26rpx;
          display: flex;
          align-items: center;
          justify-content: center;
        }
        text:nth-child(1) {
          color: #262626;
          border: 1px solid #a1a1a1;
        }
        text:nth-child(2) {
          color: #f0250e;
          border: 1px solid #f0250e;
          margin-left: 24rpx;
        }
      }
    }
  }
  .noMore {
    width: 100%;
    height: 116rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22rpx;
    color: #c1c1c1;
  }
}
</style>
